<template>
  <div class="startActivitDesigner">
    <start-process-palette/>
    <start-process-designer
        :key="`designer-${reloadIndex}`"
        :options="{
        taskResizingEnabled: true,
        eventResizingEnabled: true,
        minimap: {
          open: true
        }
}"
        v-model="xmlString"
        v-bind="controlForm"
        keyboard
        ref="processDesigner"
        @element-click="elementClick"
        @element-contextmenu="elementContextmenu"
        @init-finished="initModeler"
    >
      <template #control-bar>
        <slot name="control-bar"></slot>
      </template>
      <template #control-bar-left>
        <slot name="control-bar-left"></slot>
      </template>
      <template #control-bar-right>
        <slot name="control-bar-right"></slot>
      </template>
      <template #element-props-penal>
        <start-properties-panel width="360"
                                :key="`penal-${reloadIndex}`"
                                :bpmn-modeler="modeler"
                                :prefix="controlForm.prefix"
                                :candidate-config="candidateConfig"
                                :form-config="formConfigConfig"
                                class="process-panel"/>
      </template>
    </start-process-designer>

    <!-- demo config -->
    <div class="demo-control-bar">
      <div class="open-model-button" @click="controlDrawerVisible = true">
        <el-icon>
          <setting/>
        </el-icon>
      </div>
    </div>
    <el-drawer v-model="controlDrawerVisible"
               size="400px"
               title="偏好设置"
               append-to-body
               destroy-on-close>
      <el-form :model="controlForm"
               size="small"
               label-width="100px"
               class="control-form"
               @submit.prevent>
        <el-form-item label="流程ID">
          <el-input v-model="controlForm.processId" @change="reloadProcessDesigner(true)"/>
        </el-form-item>
        <el-form-item label="流程名称">
          <el-input v-model="controlForm.processName" @change="reloadProcessDesigner(true)"/>
        </el-form-item>
        <el-form-item label="流转模拟">
          <el-switch v-model="controlForm.simulation" inactive-text="停用" active-text="启用"
                     @change="reloadProcessDesigner()"/>
        </el-form-item>
        <!--        <el-form-item label="禁用双击">-->
        <!--          <el-switch v-model="controlForm.labelEditing" inactive-text="停用" active-text="启用"-->
        <!--                     @change="changeLabelEditingStatus"/>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="自定义渲染">-->
        <!--          <el-switch v-model="controlForm.labelVisible" inactive-text="停用" active-text="启用"-->
        <!--                     @change="changeLabelVisibleStatus"/>-->
        <!--        </el-form-item>-->
        <el-form-item label="流程引擎">
          <el-radio-group disabled v-model="controlForm.prefix" @change="reloadProcessDesigner()">
            <el-radio value="camunda">camunda</el-radio>
            <el-radio value="flowable">flowable</el-radio>
            <el-radio value="activiti">activiti</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工具栏">
          <el-radio-group v-model="controlForm.headerButtonSize">
            <el-radio value="small">small</el-radio>
            <el-radio value="default">default</el-radio>
            <el-radio value="large">large</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-switch v-model="pageMode" active-text="dark" inactive-text="light" @change="changePageMode"></el-switch>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import translations from './translations';
// 自定义渲染（隐藏了 label 标签）
import CustomRenderer from './modules/custom-renderer';
// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
import CustomContentPadProvider from './designer/plugins/content-pad';
// 自定义左侧菜单（修改 默认任务 为 用户任务）
import CustomPaletteProvider from './designer/plugins/palette';
// 任务resize
// 小地图
import minimapModule from 'diagram-js-minimap';

import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
import StartProcessPalette from "./palette/startProcessPalette.vue";
import StartProcessDesigner from "./designer/startProcessDesigner.vue";
import StartPropertiesPanel from "./penal/startPropertiesPanel.vue";

export default {
  name: 'startActivitDesigner',
  components: {StartPropertiesPanel, StartProcessDesigner, StartProcessPalette},
  data() {
    return {
      xmlString: '',
      modeler: null,
      reloadIndex: 0,
      controlDrawerVisible: false,
      infoTipVisible: false,
      pageMode: false,
      translationsSelf: translations,
      controlForm: {
        processId: '',
        processName: '',
        simulation: true,
        labelEditing: false,
        labelVisible: false,
        prefix: 'camunda',
        headerButtonSize: 'default',
        events: ['element.click', 'element.contextmenu'],
        // additionalModel: []
        additionalModel: [CustomContentPadProvider, CustomPaletteProvider, minimapModule]
      },
      addis: {
        CustomContentPadProvider,
        CustomPaletteProvider
      },
      candidateConfig: {},
      formConfigConfig: {}

    };
  },
  created() {
  },
  methods: {
    initModeler(modeler) {
      this.reloadModel(modeler)
    },
    reloadModel(modeler) {
      this.modeler = modeler;
      const canvas = modeler.get('canvas');
      const rootElement = canvas.getRootElement();

      // this.$nextTick(() => {
      //
      // })
    },
    async loadModelConfig(processModel) {
      let xml = processModel.bpmnXml

      this.candidateConfig = processModel.candidateConfig;
      this.formConfigConfig = processModel.formConfig;
      const result = await this.modeler.importXML(xml)
      const {warnings} = result;
      console.log("result", result)
      this.reloadModel(this.modeler)

    },
    getModelConfigMap() {
      return this.modelConfigMap
    },
    reloadProcessDesigner(notDeep) {
      this.controlForm.additionalModel = [];
      for (const key in this.addis) {
        if (this.addis[key]) {
          this.controlForm.additionalModel.push(this.addis[key]);
        }
      }
      !notDeep && (this.xmlString = undefined);
      this.reloadIndex += 1;
      this.modeler = null; // 避免 panel 异常
    },
    changeLabelEditingStatus(status) {
      this.addis.labelEditing = status ? {labelEditingProvider: ['value', '']} : false;
      this.reloadProcessDesigner();
    },
    changeLabelVisibleStatus(status) {
      this.addis.customRenderer = status ? CustomRenderer : false;
      this.reloadProcessDesigner();
    },
    elementClick(element) {
      this.element = element;
    },
    elementContextmenu(element) {
      // console.log('elementContextmenu:', element);
    },
    saveXML() {
      return this.modeler.saveXML();
    },
    changePageMode(mode) {
      const theme = mode
          ? {
            // dark
            stroke: '#ffffff',
            fill: '#333333'
          }
          : {
            // light
            stroke: '#000000',
            fill: '#ffffff'
          };
      const elements = this.modeler.get('elementRegistry').getAll();
      this.modeler.get('modeling').setColor(elements, theme);
    }
  }
};
</script>

<style lang="scss">
@use "startActivitDesigner";
@use "theme/index";
</style>
